<script setup lang="ts">
import useLesson from '@/composables/useLesson'

const route = useRoute()
const { find, model } = useLesson()
await find(route.params.id)
</script>

<template>
  <main class="!w-screen !p-0 !mt-0">
    <div class="relative">
      <div class="img"></div>

      <section class="py-10 xl:w-page m-auto text-gray-50">
        <h1 class="font-bold text-3xl mb-3">
          {{ model?.title }}
          <el-tag type="danger" size="large" effect="dark">实战课程</el-tag>
        </h1>
        <div>
          {{ model?.description }}
        </div>
      </section>
    </div>
    <!-- 视频列表 -->
    <div class="mx-auto xl:w-page mt-5">
      <section v-if="model?.videos.length">
        <HdCard>
          <template #header>视频列表</template>
          <div v-for="item of model.videos">
            <VideoItem :video="item" />
            <!-- <VideoItem  /> -->
          </div>
        </HdCard>
      </section>
      <section v-else>
        <AppTips>视频更新中</AppTips>
      </section>
    </div>
    <!-- 视频列表END -->
  </main>
</template>
<style lang="scss" scoped>
.img {
  background-image: url('/images/lesson.jpg');
  background-size: cover;
  filter: blur(3px);
  @apply absolute top-0 bottom-0 left-0 right-0 -z-10;
}
</style>
